<script setup lang="ts">
import type { StudentWordItem } from '@/api/types/student'
import CuttingWordCard from '@/components/WordCard/CuttingWordCard.vue'
import { computed, ref } from 'vue'

const props = defineProps<{
  words: StudentWordItem[]
}>()

const emit = defineEmits<{
  (e: 'clickCard', item: StudentWordItem): void
  (e: 'onFinish'): void
  (e: 'activate', wordId: string | number): void
}>()

const deleteList = ref<StudentWordItem[]>([])
const activeWord = ref<StudentWordItem | null>(null)
const isDeleting = ref(false)

const wordFilter = computed(() => {
  return props.words.filter(item => !deleteList.value.some(i => i.wordId === item.wordId))
})

function handleDelete(item: StudentWordItem) {
  if (isDeleting.value) {
    return
  }

  isDeleting.value = true

  deleteList.value.push(item)

  setTimeout(() => {
    isDeleting.value = false
    if (wordFilter.value.length === 0) {
      emit('onFinish')
    }
  }, 400)
}

const count = computed(() => {
  return deleteList.value.length
})

function handleClickCard(item: StudentWordItem) {
  activeWord.value = item
  emit('clickCard', { ...item })
  emit('activate', item.wordId)
}
</script>

<template>
  <view class="word-list">
    <transition-group name="fade" tag="view" class="transition-group">
      <view
        v-for="word in wordFilter"
        :key="word.wordId"
        class="word-card-wrap"
      >
        <CuttingWordCard
          :word="word"
          :is-active="activeWord?.wordId === word.wordId"
          @click="handleClickCard(word)"
        />
        <view class="word-action" @click="handleDelete(word)">
          <image src="@/static/images/wordStudy/scissors.png" />
        </view>
      </view>
    </transition-group>

    <!-- 草稿箱 -->
    <view class="draft-box">
      <view class="draft-item-content">
        <text class="count">
          {{ count }}
        </text>
        <image src="@/static/images/wordStudy/drafts@2x.png" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import '@/scss/wordCuttingCommon.scss';
.word-action{
  margin-left: 20rpx;
}
</style>
